<template>
    <div class="juese">
        <el-row>
            <el-button @click="addjuese" class="addbtn">
                添加角色
            </el-button>
        </el-row>
        <el-table
            :data="juetabData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
        </el-table>
        <el-dialog
          title="添加角色"
          :visible.sync="showjuese"
          width="30%"
          >
              <el-form ref="form" :model="roleadd" label-width="80px">
                  <el-form-item label="角色名称">
                     <el-input v-model="roleadd.name" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="模块权限">
                    <el-row type="flex">
                        <el-col>
                            <span v-if="value"  @click="handleall()">折叠</span>
                            <span v-else     @click="handleall()">展开全部</span>
                        </el-col>
                        <el-col>
                         <el-checkbox @change='change' v-model="key">选中全部</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-tree
                    ref="vuetree"
                    default-expand-all
                      @check-change="check"
                      :data="meunlist"
                      show-checkbox
                      node-key="id"
                      :props="defaultProps"
                      >
                    </el-tree>
                  </el-form-item>
                <el-form-item label="状态">
                  <el-radio-group v-model="roleadd.status">
                    <el-radio :label="0">开启</el-radio>
                    <el-radio :label="1">关闭</el-radio>
                 </el-radio-group>
                    
                  </el-form-item>
              </el-form>    
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
          </span>
        </el-dialog>
    </div>
</template>
<script>
import  {mapGetters} from 'vuex'
import {jueselist} from "@/api/permission/index.js"
export default {
    name:'juese',
    data(){
        return {
            key:true,
            value:true,
            showjuese:false,//显示角色
            defaultProps:{
                children: 'data',
                label: 'resname'

            },
            //获取所有的角色
            juesefrom:{
                page:0,
                limit:10,
                name:'',
                type:3
            },
            // 添加角色
            roleadd:{
                name:'',//角色名称
                auth:[],//菜单id
                type:0,
                status:0,
            },
            juetabData:[]
        }
    },
    computed:{
        ...mapGetters(['meunlist'])
    },
    methods:{
        //选中全部
        change(val){
            if(val) {
            this.$refs.vuetree.setCheckedNodes(this.meunlist)

            }else {
                this.$refs.vuetree.setCheckedKeys([])

            }
        },
        //是否展开全部
        handleall(){
            this.value = !this.value
            console.log( this.value);
            if( this.value){
               for (var i = 0; i < this.$refs.vuetree.store._getAllNodes().length; i++) {
                 this.$refs.vuetree.store._getAllNodes()[i].expanded = true;
               }

            }else {
                 for (var i = 0; i < this.$refs.vuetree.store._getAllNodes().length; i++) {
                this.$refs.vuetree.store._getAllNodes()[i].expanded = false;
              }
            }
        },
        //给角色选择权限
        check(){
           var list = this.$refs.vuetree.getCheckedNodes()
           var a = list.map(item=>item.id)
           this.roleadd.auth=a
        },
        //获取所有的角色列表
        async  getjueselist(){
           const data =  await jueselist(this.juesefrom)
           console.log(data);
        },
        addjuese(){
            this.showjuese = true
        }
    },
    created(){
         this.getjueselist()
    },

    
    
}
</script>
<style lang="less" scoped>
.juese {
    padding:0 20px;
}

</style>